
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                /* 清除样式 */
                list-style: none;
            }
            .header{
                height: 500px;
                background:url('images/bg.jpg') repeat-x;
            }
            .con{
                width: 968px;
                height: 377px;
                margin:47px auto 31px;
                
            }
            .footer{
                width: 968px;
                height: 50px;
               
                margin:0px auto;
            }
            .nav,.banner{
                width: 968px;
                margin:0px auto
            }
            /* 网站布局的时候，整体测量，局部可以根据情况不测量 */
            .nav h1{
                float: left;
            }
            .nav ul{
                float: right;
            }
            .nav li{
                float: left;
            }
            .nav img{
                width: 123px;
                margin-top: 14px;
            }
            .nav a{
                color:white;
                text-decoration: none;
                font-size: 16px;
                font-weight: bold;
            }
            .nav li{
                padding:12px 10px;
                margin-right: 4px;
                margin-top: 21px;
            }
            .nav li:hover{
                /* 渐变色 第一个值可以书写度数 其余值颜色，自定义 */
                background:linear-gradient(45deg,red,blue,yellow);
            }
            .banner .left{
                float: left;
            }
            .banner .right{
                float: right;
            }
            .nav{
                height: 74px;
            }
            /* 行高：从第一行文字开始到下一行文字开始，中间的留白
                    文字中心基线开始向上留白一半，向下留白一半中间距离就是行高
                多行文字才需要考虑行高
 
                单行文字一般没有行高的概念，多行文字才使用行高
             */
 
            .banner .left h3{
                font-size: 24px;
                margin:55px 0px 13px 0px;
            }
            .banner .list li{
                line-height: 28px;
                font-size: 14px;
                color:grey;
            }
            .banner .left img{
                margin-top: 15px;
                margin-bottom: 14px;
            }
            .banner .cc li{
                line-height: 24px;
 
            }
            .banner .cc a{
                font-size: 12px;
                color:green;
                text-decoration: none;
            }
            .banner .cc a:hover{
                text-decoration: underline;
                color:pink;
            }
            .con .left{
                width: 628px;
                float: left;
            }
            .con .left img{
                width: 628px;
            }
            .con .left li{
                float: left;
                width:216px;
                color:grey;
            }
            .con .left .last{
                width: 194px;
            }
            .con .right{
                width: 322px;
                float: right;
            }
            .con .right h6{
                font-size: 15px;
            }
            .con .right li{
                line-height: 30px;
                font-size: 14px;
            }
            .con .right i{
                color:red;
            }
            .con .right span{
                float: right;
            }
            .footer .left{
                float: left;
            }
            .footer .right{
                float: right;
            }
            .footer .bottom{
                float: left;
                width: 968px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="nav">
                <!-- h1引入logo -->
                <h1>
                    <a href="">
                        <img src="images/logo.png" alt="">
                    </a>
                </h1>
                <!-- ul>li引入导航 -->
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">帮助与反馈</a>
                    </li>
                    <li>
                        <a href="">公众平台</a>
                    </li>
                    <li>
                         <a href="">开放平台</a>
                    </li>
                    <li>
                        <a href="">微信支付</a>
                    </li>
                    <li>
                         <a href="">微信广告</a>
                     </li>   
                     <li>
                     <a href="">企业微信</a>
                    </li>
                    <li>
                    <a href="">表情开放平台</a>
                </li>
                <li>
                    <a href="">微信网页版</a>
                 </li>
                </ul>
            </div>
            <div class="banner">
                <div class="left">
                    <h3>微信，是一个生活方式</h3>
                    <ul class="list">
                        <li>
                            超过十亿人使用的手机应用
                        </li>
                        <li>
                            支持发送语言短信、视频、图片和文字
                        </li>
                        <li>
                            可以群了，仅减少流量，适合大部分智能手机
                        </li>
                    </ul>
                    <img src="images/ee.png" alt="" width="200px">
                    <ul class="cc">
                        <li><a href="">忘记了微信帐号或密码？</a></li>
                        <li><a href="">自动解除登录或成功限制</a></li>
                        <li><a href="">冻结或解冻微信账号</a></li>
                    </ul>
                </div>
                <img src="images/com.png" alt="" class="right">
            </div>
        </div>
        <div class="con">
            <div class="left">
                <img src="images/b.png" alt="">
                <ul>
                    <li>
                       <h6>微信网页版</h6>
                       <p>扫一扫二维码</p>
                       <p>就能在浏览器上使用微信</p>
                        <a href="">了解更多</a>
                    </li>
                    <li>
                        <h6>微信Mac版</h6>
                        <p>极致简洁，迅捷沟通</p>
                         <a href="">了解更多</a>
                     </li>
                     <li class="last">
                        <h6>微信Window版</h6>
                        <p>扫一扫二维码</p>
                        <p>让沟通更方便</p>
                         <a href="">了解更多</a>
                     </li>
                </ul>
            </div>
            <div class="right">
                <h6>最新消息</h6>
                <ul>
                    <!-- span b u i 实现小元素行内标签用法一模一样 -->
                    <li>微信 8.0.1 for Mac 正式版发布 <i>(New)</i> <span>03-30</span></li>
                    <li>微信 8.0.2 for Mac 正式版发布 <i>(New)</i> <span>03-30</span></li>
                    <li>微信 6.0.2 for Mac 正式版发布 <i>(New)</i> <span>03-30</span></li>
                    <li>微信 3.1.0 for Mac 正式版发布 <i>(New)</i> <span>03-30</span></li>
                    <li>关于部分 ios 9 用户无法更新微信 <i>(New)</i> <span>03-30</span></li>
                    <li>微信外部链接内容管理规范  <span>03-30</span></li>
                    <li>微信网页版 2.1 版本发布  <span>03-30</span></li>
                    <li>微信表情开放平台上线  <span>03-30</span></li>
                    <li>官方群公众号开通  <span>03-30</span></li>
                    <li>查看更多</li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <p class="left">关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引 </p>
            <p class="right"> 简体中文 |  繁體中文 |  English</p>
            <p class="bottom"> © 1998 - 2021 Tencent Inc. All Rights Reserved</p>
        </div>
    </body>
</html>